<template>
  <view class="content">
    <view class="select" v-if="data.cfy_name">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="巡检任务"
      />
      <input
        v-model="data.cfy_name"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder=""
      />
    </view>
    <picker
      v-if="!data.id"
      @change="bindPickerChange"
      :value="yaIndex"
      range-key="yaName"
      :range="ya"
    >
      <view class="select">
        <input
          v-model="key"
          disabled
          placeholder-style="color:#B6BFC6"
          placeholder="预案"
        />
        <input
          v-model="yaName"
          disabled
          placeholder-style="color:#B6BFC6"
          placeholder="请选择"
        />
        <image src="@/static/image/arrow_right_gray.png" />
      </view>
    </picker>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="事件类型"
      />
      <input
        style="margin-right: 26rpx"
        v-model="data.sjlx"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder=""
      />
    </view>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="事件级别"
      />
      <input
        style="margin-right: 26rpx"
        v-model="data.sjjb"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder=""
      />
    </view>
    <view class="select">
      <input
        v-model="key"
        style="width: 50vw"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="相应时限(分钟)"
      />
      <input
        style="margin-right: 26rpx"
        v-model="data.xysx"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder=""
      />
    </view>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="负责部门"
      />
      <input
        style="margin-right: 26rpx"
        v-model="bm"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder=""
      />
    </view>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="事件名称"
      />
      <input
        style="margin-right: 26rpx"
        v-model="data.sjmc"
        :disabled="data.id"
        placeholder-style="color:#B6BFC6"
        placeholder="请输入"
      />
      <!-- <image v-if="!data.id&&data.sjmc"  @click.stop="data.sjmc=''" style="margin-right: 16rpx;" src="@/static/image/input_delete.png"/> -->
    </view>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="设备"
      />
      <input
        @click="pickSb"
        v-model="sbText"
        :style="data.id ? { marginRight: '26rpx' } : { width: '56.4vw' }"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="请选择或扫描识别"
      />
      <image
        v-if="!data.id"
        @click="scan"
        style="width: 32rpx; height: 32rpx; margin: 26rpx 40rpx 0 40rpx"
        src="@/static/image/scan.png"
      />
      <image v-if="!data.id" src="@/static/image/arrow_right_gray.png" />
    </view>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="地址"
      />
      <input
        @click="chooseLocation"
        v-model="data.dd"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="请选择"
      />
      <image v-if="!data.id" src="@/static/image/arrow_right_gray.png" />
      <view v-else style="width: 26rpx" />
    </view>
    <view class="select">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="发生时间"
      />
      <input
        :style="{ marginRight: data.id ? '26rpx' : '0rpx' }"
        v-model="data.fssj"
        @click="showTime"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="请选择"
      />
      <image v-if="!data.id" src="@/static/image/arrow_right_gray.png" />
    </view>
    <view class="select" style="flex-wrap: wrap" v-if="!data.id || data.sjms">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="事件描述"
      />
      <textarea
        style="margin: 0 0 20rpx 0"
        :disabled="data.id"
        placeholder-style="color:#B6BFC6"
        class="textarea"
        v-model="data.sjms"
        maxlength="1000"
        placeholder="请输入事件描述"
      />
    </view>
    <view class="select" v-if="data.status != -1">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="状态"
      />
      <input
        :style="{ marginRight: '26rpx' }"
        v-model="data.status"
        disabled
        placeholder-style="color:#B6BFC6"
      />
    </view>

    <view class="select" style="flex-wrap: wrap" v-if="data.zkyj">
      <input
        v-model="key"
        disabled
        placeholder-style="color:#B6BFC6"
        placeholder="中控意见"
      />
      <textarea
        style="margin: 0 0 20rpx 0"
        disabled
        placeholder-style="color:#B6BFC6"
        class="textarea"
        v-model="data.zkyj"
        maxlength="1000"
      />
    </view>

    <view
      class="foot_wrap"
      v-if="!data.id"
      :style="{ paddingBottom: ios ? 'env(safe-area-inset-bottom)' : '40rpx' }"
    >
      <view class="foot" @click="submit"> 添加 </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="search">
        <input
          @input="search"
          v-model="searchValue"
          placeholder-style="color:#B6BFC6"
          placeholder="请输入名称或编码进行搜索"
      /></view>
      <scroll-view
        scroll-y
        style="height: calc(100vh - 360rpx); background: #fff"
      >
        <ly-tree
          v-if="dict.length"
          ref="tree"
          :tree-data="dict"
          :props="props"
          :defaultCheckedKeys="data.asset_id ? [data.asset_id] : []"
          node-key="id"
          showRadio
          defaultExpandAll
          :childVisibleForFilterNode="true"
          :expandOnCheckNode="false"
          checkOnClickNode
          :showNodeIcon="true"
          @check="check"
          :filterNodeMethod="filterNodeMethod"
        >
        </ly-tree>
      </scroll-view>
      <view class="popupwrap">
        <view class="popupbtn" @click="$refs.popup.close()">确定</view>
      </view>
    </uni-popup>
    <TimePicker ref="TimePicker" @submit="handleSubmit"></TimePicker>
  </view>
</template>

<script>
import API from "@/common/api.js";
import util from "@/common/util.js";
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import LyTree from "@/components/ly-tree/ly-tree.vue";
import TimePicker from "@/components/datetime-picker/datetime-picker.vue";
import QQMapWX from "@/common/qqmap-wx-jssdk.js";

var x_PI = (3.14159265358979324 * 3000.0) / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
var ee = 0.00669342162296594323; //椭球的偏心率。
export default {
  components: {
    LyTree,
    uniPopup,
    TimePicker,
  },
  data() {
    return {
      qqmap: null,

      ios: uni.getStorageSync("ios"),
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      key: "",
      yaIndex: 0,
      yaName: "",
      ya: [],
      bmList: [],
      bm: "",
      sbText: "",
      date: "",
      time: "",
      dict: [],
      searchValue: "",
      data: {
        yaid: 0,
        yaDesc: "",
        sjlx: "",
        sjjb: "",
        xysx: "",
        sjmc: "",
        sbmc: "",
        sbsn: "",
        sbid: "",
        dd: "",
        sjms: "",
        status: -1,
      },
      status: {
        "-1": "待审批",
        0: "已发起",
        1: "处理中",
        2: "已结束",
        3: "已归档",
      },
      props: function () {
        return {
          // 这里的label就可以使用函数进行自定义的渲染了
          label(data, node) {
            return node.data.sbmc + `(${node.data.sn})`;
          },
          icon: "ICONURL",
        };
      },
      filterNodeMethod: function (value, data) {
        if (data.sbmc.indexOf(value) > -1 || data.sn.indexOf(value) > -1) {
          return true;
        } else {
          return false;
        }
      },
    };
  },
  onLoad(options) {
    this.qqmap = new QQMapWX({
      key: "H43BZ-DKTC4-ZUUU5-XFU3K-JF7U5-EUFV6", // 必填
    });
    if (uni.getStorageSync("urgentData")) {
      this.data = JSON.parse(uni.getStorageSync("urgentData"));
      this.data.status = this.status[this.data.status];
      this.sbText =
        this.data.sbmc + (this.data.sbsn ? `(${this.data.sbsn})` : "");
      uni.setNavigationBarTitle({
        title: "应急事件详情",
      });
    } else {
      this.selectYjya();
      this.selectSbTree();
    }
    if (options.id) {
      setTimeout(() => {
        this.data.cfyid = options.id;
        this.data.cfy_name = options.name;
        this.$forceUpdate();
      }, 200);
    }
    this.selectOrgOptionsList();
  },
  methods: {
    search() {
      this.$refs.tree.filter(this.searchValue);
    },
    showTime() {
      if (!this.data.id) {
        this.$refs.TimePicker.show();
      }
    },
    handleSubmit(e) {
      this.data.fssj =
        e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
      this.$forceUpdate();
    },
    chooseLocation(index) {
      if (this.data.id) {
        return;
      }
      uni.chooseLocation({
        success: (r) => {
          this.qqmap.reverseGeocoder({
            location: {
              latitude: r.latitude,
              longitude: r.longitude,
            },
            success: (res) => {
              //成功后的回调
              console.log(r.longitude, r.latitude);
              // let data = util.bd_encrypt(r.longitude, r.latitude);
              let li = this.gcj02_to_wgs84(r.longitude, r.latitude);
              this.data.sjjd = li[0];
              this.data.sjwd = li[1];
              this.data.dd =
                res.result.address_component.province +
                res.result.address_component.city +
                res.result.address_component.district +
                (r.address || r.name);
            },
            fail: function (error) {
              console.error(error);
            },
            complete: function (res) {
              console.log(res);
            },
          });
        },
      });
    },
    gcj02_to_wgs84(lng, lat) {
      var dlat = this.transformlat(lng - 105.0, lat - 35.0);
      var dlng = this.transformlng(lng - 105.0, lat - 35.0);
      var radlat = (lat / 180.0) * PI;
      var magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      var sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
      dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
      let mglat = lat + dlat;
      let mglng = lng + dlng;
      return [lng * 2 - mglng, lat * 2 - mglat];
    },

    //转化经度
    transformlng(lng, lat) {
      var ret =
        300.0 +
        lng +
        2.0 * lat +
        0.1 * lng * lng +
        0.1 * lng * lat +
        0.1 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((lng / 12.0) * PI) +
          300.0 * Math.sin((lng / 30.0) * PI)) *
          2.0) /
        3.0;
      return ret;
    },
    transformlat(lng, lat) {
      var ret =
        -100.0 +
        2.0 * lng +
        3.0 * lat +
        0.2 * lat * lat +
        0.1 * lng * lat +
        0.2 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((lat / 12.0) * PI) +
          320 * Math.sin((lat * PI) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },
    selectYjya() {
      if (uni.getStorageSync("yaList")) {
        this.ya = uni.getStorageSync("yaList");
      } else {
        API.selectYjya({
          limit: 10000000,
          offset: 0,
          start: 0,
          length: 10000000,
          pzhAuthorization: this.pzhAuthorization,
        }).then((res) => {
          if (res.resCode == "success") {
            uni.hideLoading();
            res.datas.forEach((item) => {
              item.yaName = item.yamc + `(${item.yabh})`;
            });
            this.ya = res.datas;
            uni.setStorage({
              key: "yaList",
              data: this.ya,
            });
          }
        });
      }
    },
    selectOrgOptionsList() {
      if (uni.getStorageSync("bmList")) {
        this.bmList = uni.getStorageSync("bmList");
        if (this.data.id) {
          JSON.parse(this.data.bm).forEach((item, index) => {
            this.bmList.forEach((it) => {
              if (it.DEPT_ID == item) {
                this.bm = this.bm + (index ? "，" : "") + it.SIMPLE_NAME;
              }
            });
          });
        }
      } else {
        API.selectOrgOptionsList({
          params: `[{"needNull":false,"executionClass":"default"}]`,
          pzhAuthorization: this.pzhAuthorization,
        }).then((res) => {
          if (res.resCode == "success") {
            uni.hideLoading();
            this.bmList = res.datas.default;
            uni.setStorage({
              key: "bmList",
              data: this.bmList,
            });
            if (this.data.id) {
              JSON.parse(this.data.bm).forEach((item, index) => {
                this.bmList.forEach((it) => {
                  if (it.DEPT_ID == item) {
                    this.bm = this.bm + (index ? "，" : "") + it.SIMPLE_NAME;
                  }
                });
              });
            }
          }
        });
      }
    },
    panduan() {
      let msg = "";
      if (!this.data.yaid) {
        msg = "请选择预案";
      } else if (!this.data.sjmc) {
        msg = "请输入事件名称";
      } else if (!this.data.sbid) {
        msg = "请选择设备";
      } else if (!this.data.dd) {
        msg = "请选择地址";
      } else if (!this.data.fssj) {
        msg = "请选择发生时间";
      }
      if (msg) {
        uni.showToast({
          title: msg,
          icon: "none",
          duration: 2000,
        });
        return false;
      } else {
        return true;
      }
    },
    submit() {
      if (this.panduan()) {
        this.data.pzhAuthorization = this.pzhAuthorization;
        API.insertYjsj(this.data).then((res) => {
          if (res.resCode == "success") {
            uni.showToast({
              title: "添加成功",
              duration: 2000,
              icon: "success",
              mask: true,
            });
            let pages = getCurrentPages(); //获取所有页面栈实例列表
            let prevPage = pages[pages.length - 2]; //上一页页面实例
            prevPage.$vm.shuaxin = true;
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        });
      }
    },
    bindPickerChange(e) {
      let index = e.detail.value;
      this.data.yaid = this.ya[index].id;
      this.data.yaDesc = this.ya[index].yamc + "-" + this.ya[index].yams;
      this.data.sjlx = this.ya[index].sjlx_name;
      this.data.sjjb = this.ya[index].sjjb_name;
      this.data.xysx = this.ya[index].xysx;
      this.data.bm = this.ya[index].bm;
      this.bm = "";
      JSON.parse(this.data.bm).forEach((item, index) => {
        this.bmList.forEach((it) => {
          if (it.DEPT_ID == item) {
            this.bm = this.bm + (index ? "，" : "") + it.SIMPLE_NAME;
          }
        });
      });

      this.yaName = this.ya[index].yaName;
    },
    selectDictOptionsList() {
      API.selectDictOptionsList({
        pzhAuthorization: this.pzhAuthorization,
        params: `[{"parentId":"xjgl_gzdj","keyField":"CODE","textField":"NAME","needNull":false},
              {"parentId":"xjgl_gzlx","keyField":"CODE","textField":"NAME","needNull":false}]`,
      }).then((res) => {
        if (res.resCode == "success") {
          uni.hideLoading();
          this.xjgl_gzdj = res.datas.xjgl_gzdj;
          this.xjgl_gzlx = res.datas.xjgl_gzlx;
          this.data.gzdj = res.datas.xjgl_gzdj[0].CODE;
          this.data.gzlx = res.datas.xjgl_gzlx[0].CODE;
          this.gzdjName = res.datas.xjgl_gzdj[0].NAME;
          this.gzlxName = res.datas.xjgl_gzlx[0].NAME;
        }
      });
    },
    selectSbTree() {
      uni.getStorage({
        key: "sbDict",
        success: (res) => {
          this.dict = res.data;
        },
        fail: () => {
          API.selectSbTree({
            non_rela: "non_rela",
            pzhAuthorization: this.pzhAuthorization,
          }).then((res) => {
            if (res.resCode == "success") {
              uni.hideLoading();
              this.dict = this.toTreeData(res.datas);
              uni.setStorage({
                key: "sbDict",
                data: this.dict,
              });
            }
          });
        },
      });
    },
    toTreeData(data) {
      let resData = data;
      let tree = [];

      for (let i = 0; i < resData.length; i++) {
        if (resData[i].parent_id == "0") {
          resData[i].children = [];
          tree.push(resData[i]);
          resData.splice(i, 1);
          i--;
        }
      }
      run(tree);
      function run(chiArr) {
        if (resData.length !== 0) {
          for (let i = 0; i < chiArr.length; i++) {
            for (let j = 0; j < resData.length; j++) {
              if (chiArr[i].id === resData[j].parent_id) {
                resData[j].children = [];
                chiArr[i].children.push(resData[j]);
                resData.splice(j, 1);
                j--;
              }
            }
            run(chiArr[i].children);
          }
        }
      }
      return tree;
    },
    pickSb() {
      if (!this.data.id) {
        uni.showLoading();
        this.searchValue = "";
        this.$refs.popup.open();
        setTimeout(() => {
          uni.hideLoading();
        }, 3000);
      }
    },
    clearSb() {
      this.data.asset_sn = "";
      this.data.asset_mc = "";
      this.data.asset_id = 0;
      this.data.showText = "";
    },
    clearDd() {
      this.data.dd = "";
      this.data.sjjd = "";
      this.data.sjwd = "";
    },
    check() {
      let list = this.$refs.tree.getCheckedNodes();
      list.forEach((item) => {
        this.data.sbmc = item.sbmc;
        this.data.sbsn = item.sn;
        this.data.sbid = item.id;
        this.sbText = item.sbmc + `(${item.sn})`;

        this.data.dd = item.sbdz;
        this.data.sjjd = item.jd;
        this.data.sjwd = item.wd;
      });
    },
    scan() {
      uni.scanCode({
        success: (res) => {
          console.log(res, "www");
          if (res.errMsg == "scanCode:ok") {
            try {
              let data = JSON.parse(res.result);
              if (data.sn) {
                API.selectSbtz({
                  pzhAuthorization: this.pzhAuthorization,
                  flag: "info",
                  canDel: 0,
                  sbbm: data.sn,
                }).then((res) => {
                  if (res.resCode == "success") {
                    uni.hideLoading();
                    if (res.datas.length) {
                      this.data.sbsn = res.datas[0].sn;
                      this.data.sbmc = res.datas[0].sbmc;
                      this.data.sbid = res.datas[0].id;
                      this.sbText = this.data.sbmc + `(${this.data.sbsn})`;
                      this.data.dd = res.datas[0].sbdz;
                      this.data.sjjd =
                        res.datas[0].jwdList && res.datas[0].jwdList.length
                          ? res.datas[0].jwdList[0].jd
                          : "";
                      this.data.sjwd =
                        res.datas[0].jwdList && res.datas[0].jwdList.length
                          ? res.datas[0].jwdList[0].wd
                          : "";
                      this.$forceUpdate();
                    } else {
                      uni.showToast({
                        title: "未查询到相关数据",
                        duration: 2000,
                        icon: "none",
                      });
                    }
                  }
                });
              } else {
                uni.showToast({
                  title: "请扫描正确的设备二维码",
                  duration: 2000,
                  icon: "none",
                });
              }
            } catch (err) {
              uni.showToast({
                title: "请扫描正确的设备二维码",
                duration: 2000,
                icon: "none",
              });
            }
          }
        },
      });
    },
  },
};
</script>
<style lang="less">
.content {
  .uni-popup__wrapper-box {
    padding: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    max-width: 100% !important;
    margin-top: -220rpx;
  }
}
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
body {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
text {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
}

page {
  background: #fff;
}

button {
  width: 100%;
}
/* #endif */
.content {
  background: white;
  padding: 0rpx 0rpx 260rpx 32rpx;
  font-size: 28rpx;
  // width: calc(100vw - 64rpx);
  min-height: calc(100vh - 232rpx);
  .select {
    display: flex;
    margin-top: 20rpx;
    border-bottom: 1px solid #eef1f1;
    // justify-content: space-between;
    padding-right: 10rpx;
    .left {
      width: 30vw;
      color: rgba(0, 0, 0, 0.3);
    }
    image {
      width: 20rpx;
      height: 40rpx;
      display: block;
      margin: 20rpx 0 0 6rpx;
    }
    .address {
      width: calc(100% - 104rpx);
      padding-top: 10rpx;
      font-size: 26rpx;
      margin: 0 20rpx;
    }
    input:first-child {
      width: 20vw;
      text-align: left;
    }
    input {
      width: calc(80vw - 26rpx);
      padding: 20rpx 0;
      font-size: 30rpx;
      text-align: right;
    }
    text {
      width: 222rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(143, 188, 197, 1);
      line-height: 124rpx;
      margin-left: 20rpx;
      text-align: right;
    }
  }
  .popupwrap {
    border-top: 2rpx solid rgba(149, 149, 149, 0.1);
    background: white;
    padding: 60rpx 20vw;
    .popupbtn {
      width: 60vw;
      line-height: 80rpx;
      background: #01b7fc;
      color: white;
      text-align: center;
      border-radius: 40rpx;
    }
  }

  textarea {
    background: #f5f6f9;
    border-radius: 22rpx;
    width: calc(100% - 72rpx);
    padding: 20rpx;
    margin-top: 32rpx;
    height: 160rpx;
  }
  .wrap {
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .title {
      width: 100%;
      margin-bottom: 16rpx;
    }
    .item {
      margin-bottom: 32rpx;
      width: 196rpx;
      height: 136rpx;
      margin-right: 18rpx;
      background: #f5f6f9;
      .image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        display: block;
      }
      .del {
        width: 36rpx;
        height: 36rpx;
        right: -178rpx;
        top: -154rpx;
      }
      view {
        image {
          width: 48rpx;
          height: 48rpx;
          margin: 24rpx 0 0rpx calc(50% - 24rpx);
        }
      }
    }
  }
  .foot_wrap {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 32rpx);
    margin-left: -32rpx;
    background: white;
    padding: 40rpx 0 40rpx 32rpx;
    box-shadow: 0rpx -10rpx 32rpx 0rpx rgba(0, 0, 0, 0.06);
    .foot {
      width: calc(100vw - 64rpx);
      background: rgba(74, 125, 221, 1);
      margin-top: 24rpx;
      line-height: 76rpx;
      text-align: center;
      color: white;
      border-radius: 8rpx;
    }
  }
  .search {
    background: #ffffff;
    padding-top: 20rpx;
    input {
      width: 70vw;
      margin-left: 15vw;
      padding: 0 40rpx;
      box-sizing: border-box;
      border: 1rpx solid #ebedf0;
      border-radius: 40rpx;
      line-height: 60rpx;
      height: 60rpx;
    }
  }
}
</style>
